<template>
  <div>
    <section class="top">
        <div class="shortcut" ref="navbar">
            <div class="w">
                <div class="fl">
                    <h3>Qian Miaomiao</h3>
                </div>

                <div class="fr">
                    <ul>
                      <li>
                        <input type="text" v-show="isShow" @blur="hidd" ref="inputTitle">
                      </li>
                        <li>
                            <span class="iconfont icon-sousuo ml14"></span>
                            <a href="#" @click="showIpt">搜索</a>
                        </li>
                        <li>
                            <span class="iconfont ml14">&#xe60f;</span>
                            <router-link to="/home">首页</router-link>
                        </li>
                        <li class="hobby">
                            <span class="iconfont ml14">&#xe66b;</span>
                            <router-link to="/hobby">爱好</router-link>
                            <!-- <span class="iconfont icon-arrow-down change"></span> -->
                        </li>
                        <li>
                            <span class="iconfont ml14">&#xe728;</span>
                            <router-link to="/manage">管理内容</router-link>
                        </li>
                        <li>
                            <span class="iconfont ml14">&#xe689;</span>
                            <a href="#">优质Blog</a>
                        </li>
                        <li>
                            <span class="iconfont ml14">&#xe650;</span>
                            <router-link to="/about">关于我</router-link>
                        </li>
                        <li>
                            <span class="iconfont ml14">&#xe60d;</span>
                            <router-link to="/publish">发布文章</router-link>
                        </li>
                        <li v-if="!$store.state.user.token">
                            <span class="iconfont ml14">&#xea19;</span>
                            <router-link to="/login">登录/注册</router-link>
                        </li>
                        <li v-else @click="logout">
                          <span class="iconfont ml14">&#xea19;</span>
                          <router-link to="/login">退出登录</router-link>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- <ul class="menu">
            <a href="./html/hobby.html">
                <li><span class="iconfont">&#xe63c;</span>书籍</li>
            </a>
            <a href="#">
                <li><span class="iconfont">&#xe60d;</span>电影</li>
            </a>
            <a href="#">
                <li><span class="iconfont">&#xe650;</span>娱乐</li>
            </a>
            <a href="#">
                <li><span class="iconfont">&#xe612;</span>音乐</li>
            </a>
        </ul> -->
    </section>
   
  </div>
</template>

<script>
export default {
    name:'myHeader',
    data(){
      return{
        isShow:false,
        oldScrollTop: 0,
      }
    },
    mounted(){
      window.addEventListener("scroll", this.scrolling)
    },
    methods:{
      showIpt(){
        this.isShow = true
        this.$nextTick(function(){
					this.$refs.inputTitle.focus()
				})
      },
      hidd(){
        this.isShow = false
      },
      logout(){
        this.$store.dispatch('logout')
      },
      scrolling() {
                // 滚动条距文档顶部的距离
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop ||
                    document.body.scrollTop
                // 滚动条滚动的距离
                let scrollStep = scrollTop - this.oldScrollTop;
                // 更新——滚动前，滚动条距文档顶部的距离
                this.oldScrollTop = scrollTop;
                if (scrollStep < 0) {
                    this.$refs.navbar.style.position = "fixed"
                } else {
                    this.$refs.navbar.style.position = "absolute"
                }
            }
    }
}
</script>

<style scoped>
  .shortcut{
    position: absolute;
    z-index: 2;
  }
  .shortcut ul li{
    position: relative;
    display: block;
  }
  .shortcut ul li a::before{
    margin-left:-21px;
    margin-top: 52px;
   content: "";
   position: absolute;
   height: 4px;
   overflow: hidden;
   display: inline-block;
   background-color: skyblue;
   width: 100%;
   transform: scale3d(0,1,1);
   transform-origin: left;
   /* transform: scaleX(0); */
   transition: all 0.5s;
  }
  .shortcut ul li:hover a::before{
    transform: scale3d(1,1,1);
    /* transform: scaleX(1); */
    /* color: skyblue; */
  }
  .shortcut .iconfont{
    font-size: 18px;
    cursor: pointer;
  }
  .shortcut{
    width: 100%;
    height: 55px;
    line-height: 55px;
    font-size: 15px;
    background-color: rgb(225, 241, 254);
    opacity: 0.6;
  }
  .shortcut ul li{
    float: left;
  }
  input{
    background-color: rgb(185, 181, 181);
    height: 20px;
  }
  .top .menu{
    display: none;
    position: absolute;
    float: left;
    margin-left: 945px;
    margin-top: -1px;
    height: 140px;
    width: 100px;
    background-color: white;
    border: 1px solid white;
    border-radius: 15%;
    overflow: hidden;
  }
  .menu li{
    text-align: center;
    height: 35px;
    line-height: 35px;
    font-size: 16px;
  }
  .menu li:hover{
    background-color: skyblue;
  }
</style>